<script setup>
import { inject, onMounted, reactive, watch, ref } from 'vue'

const wheel = ref(null)

const props = defineProps({
  angle: Number
})

var centerXOffset = 0
var centerYOffset = 0

const d = (Math.PI * (props.angle + 0)) / 180
var wheelRadius = 0
const wheelRotation = inject('wheelRotation')

const point = reactive({
  x: centerXOffset + wheelRadius * Math.cos(d) + 'px',
  y: centerXOffset + wheelRadius * Math.sin(d) + 'px'
})

function onRotationChanged(r) {
  const degree = (Math.PI * (props.angle + r)) / 180
  point.x = centerXOffset + wheelRadius * Math.cos(degree) + 'px'
  point.y = centerYOffset + wheelRadius * Math.sin(degree) + 'px'
  console.log('onRotationChanged:' + r)
}
watch(wheelRotation, onRotationChanged)
function init() {
  const wheelStyle = window.getComputedStyle(wheel.value)
  const parent = wheel.value.parentNode
  const parentStyle = window.getComputedStyle(parent)

  // centerXOffset = parseInt(parentStyle.width) / 2 - parseInt(wheelStyle.width) / 2
  // centerYOffset = parseInt(parentStyle.height) / 2 - parseInt(wheelStyle.height) / 2
  wheelRadius = centerXOffset
  console.log('init:[' + centerXOffset + ',' + centerYOffset + ']')
  onRotationChanged(0)
}
onMounted(() => {
  init()
})
</script>
<template>
  <div class="wheelItem" :style="{ left: point.x, top: point.y }" ref="wheel"><slot></slot></div>
</template>
<style scoped>
.wheelItem {
  width: 1rem;
  height: 1rem;
  background-color: rgb(148, 241, 218);
  position: absolute;
}
</style>
